<template>
	<view>
		<view class="body after-navber">
			<view>
				<view class="flex-y-center" style="background: #fff;">
					<view class="search2 flex-y-center flex-grow-1">
						<input class="placeholder flex-grow-1" @input="keywordInput" placeholder-style="color:#cbcbcb"
							placeholder="搜索您想要的..."></input>
						<button class="search-btn" @tap="search">搜索</button>
					</view>
				</view>
				<view class="flex classify">
					<scroll-view class="navlist flex-grow-1" scroll-x="true" :scroll-into-view="viewId">
						<view :data-index="index" :data-id="item.id" @tap="navs"
							:class="'item flex-grow-0 ' + (tabcurrut2 == index ? 'active' : '')"
							v-for="(item, index) in cate" :key="index" :id="'s'+item.id">
							{{ item.name }}
						</view>
					</scroll-view>
					<view class="flex-y-center flex-x-center flex-grow-0 shaixuan" @tap="sxshow">
						<image src="/static/images/shaixuan.png" class="icon"></image>
						筛选
					</view>
				</view>
				<!-- 筛选 -->
				<view class="zhaoce" v-if="!sxhidden">
					<scroll-view scroll-y class="rightlist">
						<view class="flex-aro shaixuan">
							<view class="reset" @tap="sxreset">取消</view>
							<view class="confirm" @tap="hiddentap">确定</view>
						</view>
						<view style="margin-bottom: 150rpx">
						<!-- 	<view>
								<view class="title">
									{{money_name}}
								</view>
								<view class="flex" style="flex-wrap: wrap">
									<view :class="'radio ' + (check1==index ? 'active' : '')" :data-value="item.id"
										:data-index="index" @tap="checktap1" v-for="(item, index) in moneysort"
										:key="index">

										{{ item}}
									</view>
								</view>
							</view> -->
							<view>
								<view class="title">
									智能排序
								</view>
								<view class="flex" style="flex-wrap: wrap">
									<view :class="'radio ' + (check2==index ? 'active' : '')" :data-value="item.id"
										:data-index="index" @tap="checktap2" v-for="(item, index) in sort" :key="index">
										{{item}}
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-row" style="flex-wrap: wrap; justify-content: space-between;margin: 0 20rpx;"
					v-if="goods_list.length > 0">
					<view @tap="goodsInfo(item.id)" class="goods" :data-goods-id="item.id"
						v-for="(item, index) in goods_list" :key="item.id">
						<image class="goods-img" :src="item.image"></image>

						<view class="goods-name text-more-2">{{ item.name }}</view>
						<view class="flex-bet" style="padding:0 16rpx 14rpx;">
							<view>
								<view class="goods-price">
									{{ item.score }}{{money_name}}
								</view>
								<view class="goods-font">
									<view>仅剩{{ item.inventory }}{{ item.unit }}</view>
								</view>
							</view>
							<view class="goods-buy" :data-index="index">兑换</view>
						</view>
					</view>
				</view>
			</view>
			<view @tap="hideModal" @touchmove.stop.prevent="preventTouchMove" id="modal-mask" v-if="showModel"></view>
			<view class="" style="color: #999;text-align: center;margin: 15rpx;" v-if="!has_more">
				没有更多了~
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Index
	} from '../../../apirequest/index-model.js';
	var i = new Index();
	import {
		My
	} from '../../../apirequest/my-model.js';
	var m = new My();
	var integral_catId = 0;
	var integral_index = -1;
	var page = 1;
	export default {
		data() {
			return {
				tabcurrut2: 0,
				cate: [{
					id: 0,
					name: '全部'
				}],
				viewId: '',
				banner_list: [],
				goods_list: [],
				coupon_list: '',
				integral: '',
				current: 1,
				navList: [],
				showModel: false,
				content: '',
				status: 0,
				cat_checked: false,
				user_info: false,
				page: 1,
				has_more: true,
				keyword: '',
				navList2: "",
				check1: -1,
				moneysort: ['升序', '降序'],
				check2: -1,
				sort: [this.globalData.money_name,+'升序',this.globalData.money_name+'降序','好评优先', '人气优先'],
				sxhidden: true,
				money_name:this.globalData.money_name,

			}
		},
		onLoad: function(options) {
			var that = this

			if (options.uid) {
				uni.setStorageSync('pid', options.uid)
			}
			this._get_cate();
			this._getList();

		},

		onPullDownRefresh() {
			this._get_cate();
			this._index()
			this.goods_list = []
			this.has_more = true
			this.page = 1
			this._getList();
			uni.stopPullDownRefresh()
		},
		onShow() {
			this._index()
		},
		onReachBottom() {
			this._getList();
		},

		onShareAppMessage() {
			var user = wx.getStorageSync('userinfo');
			return {
				title: '兑投',
				path: '/pages/integral-mall/index/index?uid=' + user['id'],
			}
		},
		onShareTimeline() {
			var user = wx.getStorageSync('userinfo');

			return {
				title: '兑投',
				query: 'uid=' + user['id'],
			}
		},

		methods: {
			sxshow: function() {
				this.sxhidden = false
			},
			sxreset: function() {
				this.sxhidden = true
			},
			checktap1: function(e) {
				var index = e.currentTarget.dataset.index;
				if (this.check1 == index) {
					this.check1 = -1
				} else {
					this.check1 = index
				}

			},
			checktap2: function(e) {
				var index = e.currentTarget.dataset.index;
				if (this.check2 == index) {
					this.check2 = -1
				} else {
					this.check2 = index
				}

			},
			_index() {
				var that = this;
				i.get_kefu_mobile((res) => {
					if (res.code == 1) {
						that.kefu = res.data
					}
				})
				i.get_banner_list({
					pos: 2
				}, (res) => {
					if (res.code == 1) {
						that.banner_list = res.data
					}
				})
				i.get_nav_list({
					pos: 2
				}, (res) => {
					if (res.code == 1) {
						that.navList = res.data
						that.navList2 = res.data
						console.log(res.data)
						that.getNaveList();
					}
				})
				m.get_user_info((res) => {
					if (res.code == 1) {
						that.user_info = res.data

					}
				})


			},
			_get_cate() {
				var that = this;
				i.get_category_list({
					pos: 1
				}, (res) => {
					if (res.code == 1) {
						that.cate = that.cate.concat(res.data)

					}
				})
			},
			_getList() {
				var that = this;
				if (!this.has_more) {
					return false;
				}
				var page = this.page;
				var cate_id = this.cate[this.tabcurrut2].id
				i.get_product_list({
					page: page,
					is_score_buy: 1,
					keyword: this.keyword,
					cid: cate_id,
					sort:this.check2
				}, (res) => {
					if (res.code == 1) {
						that.goods_list = that.goods_list.concat(res.data.data)
						that.has_more = res.data.has_more
						that.page = page + 1
						console.log('that.goods_list')
						console.log(that.goods_list)
					}
				})
			},
			//跳转
			bannerjump(type, index, index1) {
				var item = [];
				var that = this;
				switch (type) {
					case 1:
						item = this.banner_list[index];
						break;
					case 2:
						item = this.navList[index];

						break;
					case 3:
						item = this.navList[index][index1];
						break;
				}

				// console.log(item)
				var page = item.pages;
				var url = page ? page.url : ''
				if (item.param > 0) {
					url = url + item.param
				}
				if (page) {
					switch (page.jump_type) {
						case "navigate":
							uni.navigateTo({
								url: url,
							})
							break;
						case "redirect":
							uni.redirectTo({
								url: url,
							})
							break;
						case "switchTab":
							uni.switchTab({
								url: url,
							})
							break;
						case "reLaunch":
							uni.reLaunch({
								url: url,
							})
							break;
						case "web":
							var _url = encodeURI(url)
							uni.navigateTo({
								url: "/page/web/web?u=" + _url,
							})
							break;
						case "mini":
							wx.navigateToMiniProgram({
								appId: page.appid,
								path: url,
								extraData: page.link_field ? page.link_field : {},
								success(res) {
									console.info(res);
									// 打开成功
								}
							});
							break;
					}
				}
			},
			//分类
			navs: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				that.tabcurrut2 = index
				this.cate_id = this.cate[index].id
				this.page = 1
				this.has_more = true
				this.goods_list = [];
				this._getList()

			},
			goodsdetail: function(id) {
				uni.navigateTo({
					url: '/pages2/shop/goods-detail/goods-detail?id=' + id
				})
			},
			clicktap(e) {
				var urls = e.currentTarget.dataset.url
				console.log(urls)
				uni.navigateTo({
					url: urls
				})
			},
			getNaveList() {
				let list = this.navList;
				let pageNum = 10; //我们需要的数据要多少条

				let index = 0; //切割数据的位置

				let navList = [];

				if (list.length > pageNum) {
					//这里说明数组的长度比我们需要的数据要多
					while (index < list.length) {
						//说明还有数据可以切割。如果大于了。那么在index的位置则没有数据了
						navList.push(list.slice(index, (index += pageNum)));
					}
					this.navList = navList
					console.log(this.navList)
					return;
				} else {
					this.navList = list
					console.log(this.navList)
					return;
				}
			},
			//筛选确定
			hiddentap(){
				this.goods_list = []
				this.has_more = true
				this.page = 1
				this.sxhidden = true
				this._getList();
			},
			//搜索输入
			keywordInput(e) {
				this.keyword = e.detail.value
			},
			search() {
				this.goods_list = [];
				this.page = 1;
				this.has_more = true;
				this._getList()
			},
			exchange: function() {
				uni.navigateTo({
					url: '/pages2/integral-mall/exchange/exchange'
				})
			},
			register: function() {
				uni.navigateTo({
					url: '/pages2/integral-mall/sign_in/sign_in'
				})
			},
			detail: function() {
				uni.navigateTo({
					url: '/pages2/integral-mall/details/details'
				})
			},
			goodsInfo: function(id) {
				uni.navigateTo({
					url: '/pages2/integral-mall/goods-info/goods-info?id=' + id
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background: #eee;
	}

	.head {
		position: relative;
		z-index: 10;
		padding: 20rpx;
	}

	.head-img {
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
	}

	.shuoming {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		left: 60%;
		top: 50rpx;
	}

	.shuoming image {
		width: 30rpx;
		height: 30rpx;
	}

	.integral {
		color: #fff;
		font-size: 0.95rem;
		padding: 28rpx 0rpx 30rpx 0rpx;
	}

	.my-integral {
		color: #fff;
		font-size: 1.8rem;
		line-height: 1;
		position: relative;
		text-align: center;
	}

	.my-exchange {
		color: #fff;
		margin-bottom: 20rpx;
		line-height: 1;
		position: relative;
	}

	.my-exchange image {
		width: 34rpx;
		height: 34rpx;
		margin-right: 16rpx;
	}

	.rotation-chart {
		height: 100%;
		width: 100%;
		background: #f7f7f7;
	}

	.swiper {
		height: 190rpx;
		margin: 56rpx 0rpx 20rpx 0rpx;
		width: 100%;
	}

	.slide-image {
		height: 190rpx;
		width: 100%;
	}

	.exchange-coupon {
		margin-bottom: 40rpx;
	}

	.coupon-head {
		color: #353535;
		margin: 30rpx 0rpx 38rpx 20rpx;
		padding-left: 16rpx;
		border-left: 4rpx solid #ff6f28;
	}

	.scroll-view-item {
		width: 256rpx;
		height: 130rpx;
		margin-right: 16rpx;
		position: relative;
		color: #fff;
	}

	.duihuan {
		width: 56rpx;
		font-size: 7pt;
		padding: 10rpx 16rpx;
		line-height: 1.2;
	}

	.scroll-view {
		display: inline-block;
		height: 80rpx;
		margin: 20rpx 0rpx;
		width: 138rpx;
	}

	#cat_name_active view {
		color: #ff6f28;
	}

	.item-image {
		width: 46rpx;
		height: 46rpx;
		margin-left: 46rpx;
	}

	.original-cost {
		margin: 32rpx 0 0 24rpx;
		color: #353535;
		font-weight: bolder;
		line-height: 1;
	}

	.full-price {
		margin: 18rpx 0 38rpx 24rpx;
		color: #353535;
		font-size: 11px;
	}

	.exchange {
		color: #353535;
		font-size: 9pt;
		border: 2rpx solid #353535;
		border-radius: 24rpx;
		height: 48rpx;
		padding: 0 32rpx;
	}

	.scroll-view view {
		position: static;
		display: flex;
		justify-content: center;
		color: #353535;
		font-size: 10px;
	}

	.goods {
		width: 347rpx;
		background-color: #fff;
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.goods-img {
		width: 100%;
		height: 347rpx;
	}

	.goods-name {
		margin: 20rpx 0 10rpx;
		padding: 0 16rpx;
		color: #353535;
		font-size: 9pt;
		line-height: 1.4;
		height: 2.8em;
	}

	.goods-price {
		color: #FD1945;
		font-size: 15px;
		margin-bottom: 8rpx;
	}

	.goods-font {
		color: #999;
		font-size: 11px;
		margin: 0rpx;
		height: 20rpx;
	}

	.goods-buy {
		margin: 0rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10rpx;
		color: #fff;
		font-size: 15px;
		    border: 1rpx solid #fc1b4c;
		    background: linear-gradient(to right,#fc1b4c, #ff6f8e);
		width: 102rpx;
	}

	.register {
		width: 300rpx;
		height: 76rpx;
		left: 30%;
		top: 85%;
		position: absolute;
		z-index: 1;
	}

	.ci_shibai {
		width: 580rpx;
		height: 310rpx;
		border-radius: 16rpx;
		background: #fff;
		overflow: hidden;
		position: fixed;
		top: 35%;
		left: 85rpx;
		z-index: 9999;
	}

	.ci_shibai_pic {
		width: 124rpx;
		height: 134rpx;
		margin: 88rpx 48rpx 88rpx 96rpx;
		float: left;
	}

	.ci_success_pic {
		width: 580rpx;
		height: 310rpx;
		position: fixed;
		top: 20%;
	}

	.ci_shibai_font {
		margin-top: 104rpx;
		float: left;
		color: #353535;
	}

	.ci_success_font {
		display: flex;
		justify-content: center;
		margin: 160rpx 0 20rpx 0;
		color: #353535;
		font-size: 16px;
	}

	.ci_success_btn {
		margin: 0 40rpx;
	}

	.success_btn {
		width: 228rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 30rpx;
	}

	.ci_close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 16rpx;
		top: 16rpx;
		z-index: 9999;
	}

	#modal-mask {
		width: 100vh;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		z-index: 7777;
		color: #fff;
	}

	.swiNav {
		width: 100%;
		height: 324rpx;
	}

	.swiNav .itemNav {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.swiNav .itemNav .nav {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		height: 120rpx;
		width: 20%;
	}

	.swiNav .itemNav .nav .icon {
		width: 80rpx;
		height: 80rpx;
	}

	.swiNav .itemNav .nav .name {
		font-size: 0.75rem;
	}

	.search2 {
		border-radius: 50rpx;
		border: 1px solid #ec1e20;
		border-radius: 10rpx;
		margin: 20rpx;
		padding-left: 20rpx;
		background: #fff;
	}


	.search2 .search-btn {
		width: 140rpx;
		height: 70rpx;
		text-align: center;
		line-height: 65rpx;
		font-size: 0.95rem;
		letter-spacing: 4rpx;
		color: #fff;
		background: -webkit-linear-gradient(bottom, #fe7c74, #ec2b2b);
		background: linear-gradient(to bottom, #fe7c74, #ec2b2b);
		border: none;
		border-radius: 0;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.qiandao {
		background: #fc6463;
		color: #fff;
		border-radius: 40rpx;
		width: 160rpx;
		text-align: center;
		padding: 10rpx 0;
	}

	.classify {
		margin-top: 10rpx;
		background: #fff;
	}

	.classify .shaixuan {
		background: #f8f8f8;
		padding: 0 20rpx;
		box-shadow: 0px -2px 3px 1px #ebebeb;

		.icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.navlist {
		z-index: 888;
		border-radius: 10rpx;
		padding: 0 0 0 20rpx;
		white-space: nowrap;
		width: 100%;
		font-size: 0.95rem;
	}

	.navlist .item {
		text-align: center;
		margin-right: 30rpx;
		padding: 20rpx 0;
		font-weight: 700;
		display: inline-block;
	}

	.navlist .active {
		color: #ff3850;
	}

	.zhaoce {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.2);
		z-index: 1000;
	}

	.zhaoce .rightlist {
		background: #fff;
		width: 74%;
		position: absolute;
		height: 100vh;
		right: 0;
		top: 0;
		/* z-index: 1000; */
		padding: 0 20rpx;
	}

	.zhaoce .rightlist .title {
		font-weight: 700;
		font-size: 0.95rem;
		margin: 20rpx 0;
	}

	.zhaoce .rightlist .radio {
		width: 31%;
		background: #f5f7f9;
		border-radius: 10rpx;
		padding: 18rpx 0;
		text-align: center;
		margin: 8rpx 0;
		margin-right: 3%;
	}

	.zhaoce .rightlist .active {
		background: #fc1849;
		color: #fff;
	}

	.zhaoce .rightlist .radio:nth-child(3n) {
		margin-right: 0;
	}

	.zhaoce .rightlist .reset {
		color: #fc1849;
		border: 1px solid #fc1849;
		width: 200rpx;
		border-radius: 10rpx;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 0.85rem;
	}

	.zhaoce .rightlist .confirm {
		border: 1px solid #fc1849;
		background-color: #fc1849;
		width: 200rpx;
		border-radius: 10rpx;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 0.85rem;
		color: #fff;
	}

	.zhaoce .rightlist .shaixuan {
		position: fixed;
		width: 69%;
		background: #fff;
		z-index: 88;
		padding-bottom: 10rpx;
		bottom: 0;
		padding: 20rpx 0;
	}
</style>
